<style include="cr-shared-style shimless-rma-shared">
  cr-dialog::part(dialog) {
    width: 700px;
  }

  .button-card {
    align-items: center;
    border-radius: 4px;
    box-shadow: var(--cr-card-shadow);
    height: 90px;
    margin-bottom: 20px;
    width: 350px;
  }

  :host([plugged-in_]) #batteryCutButton {
    opacity: 0.5;
  }

  .button-text {
    flex-basis: 250px;
  }

  .button-label {
    color: black;
    margin-bottom: 5px;
  }

  .button-description {
    color: grey;
  }

  .button-icon {
    flex-grow: 1;
    height: 40px;
    width: 40px;
  }

  #diagnosticsIconDiv {
    display: flex;
    flex-grow: 1;
    justify-content: center;
  }

  #diagnosticsIcon {
    height: 40px;
    width: 40px;
  }

  .log {
    white-space: pre;
  }
</style>

<base-page orientation="column">
  <div slot="header">
    <h1>[[i18n('repairCompletedTitleText')]]</h1>
    <div>[[i18n('repairCompletedDescriptionText')]]</div>
    <cr-button id="shutDownButton" on-click="onShutDownButtonClick_"
        disabled="[[allButtonsDisabled]]">
        [[i18n('repairCompleteShutDownButtonText')]]
    </cr-button>
    <cr-button id="rebootButton" on-click="onRebootButtonClick_"
        disabled="[[allButtonsDisabled]]">
        [[i18n('repairCompleteRebootButtonText')]]
    </cr-button>
  </div>
  <div slot="body">
    <cr-button id="diagnosticsButton" class="button-card"
      on-click="onDiagnosticsButtonClick_" disabled="[[allButtonsDisabled]]">
      <div id="diagnosticsIconDiv">
        <img id="diagnosticsIcon" src="png/diagnostics_app_icon_192.png">
      </div>
      <div class="button-text">
        <div class="button-label">
          <span>[[i18n('repairCompletedDiagnosticsButtonText')]]</span>
        </div>
        <div class="button-description">
          [[i18n('repairCompletedDiagnosticsDescriptionText')]]
        </div>
      </div>
    </cr-button>
    <cr-button id="rmaLogButton" class="button-card"
      on-click="onRmaLogButtonClick_" disabled="[[allButtonsDisabled]]">
      <iron-icon icon="shimless-icon:rma-log" class="button-icon"
          hidden="[[!checked]]">
      </iron-icon>
      <div class="button-text">
        <div class="button-label">
          <span>[[i18n('repairCompletedLogsButtonText')]]</span>
        </div>
        <div class="button-description">
          [[i18n('repairCompletedLogsDescriptionText')]]
        </div>
      </div>
    </cr-button>
    <div id="batteryCutoffTooltipWrapper">
      <cr-button id="batteryCutButton" class="button-card"
        on-click="onBatteryCutButtonClick_"
        disabled$="[[disableBatteryCutButton_(pluggedIn_,
            allButtonsDisabled)]]">
        <iron-icon id="battery-cutoff-icon" icon="shimless-icon:battery-cutoff"
            class="button-icon" hidden="[[!checked]]">
        </iron-icon>
        <div class="button-text">
          <div class="button-label">
            <span>[[i18n('repairCompletedShutoffButtonText')]]</span>
            <iron-icon id="battery-cutoff-info-icon" hidden="[[!pluggedIn_]]"
                icon="shimless-icon:info-grey">
            </iron-icon>
          </div>
          <div class="button-description">
            [[i18n('repairCompletedShutoffDescriptionText')]]
          </div>
          <div class="button-description" hidden="[[!pluggedIn_]]">
            [[i18n('repairCompletedShutoffInstructionsText')]]
          </div>
        </div>
      </cr-button>
    </div>
    <paper-tooltip for="batteryCutoffTooltipWrapper" hidden="[[!pluggedIn_]]">
      [[i18n('batteryShutoffTooltipText')]]
    </paper-tooltip>
  </div>
</base-page>

<cr-dialog id="logsDialog" close-text="close">
  <div slot="title">
    [[i18n('rmaLogsTitleText')]]
  </div>
  <div slot="body">
    <div class="log">[[log_]]</div>
  </div>
  <div slot="footer">
    <cr-button id="closeLogDialogButton" on-click="onCancelClick_">
      [[i18n('rmaLogsCancelButtonText')]]
    </cr-button>
    <cr-button id="rmaLogButton" on-click="onRmaLogButtonClick_">
      [[i18n('rmaLogsSaveToUsbButtonText')]]
    </cr-button>
  </div>
</cr-dialog>
